<template>
    <el-dialog title="编辑跟进列表" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="50px" :before-close="beforeClose">
        <div class="dialogVue">
            <div class="inpVue">
                <div class="label">微信名</div>
                <el-input v-model="editObj.friendWechatName" readonly style="margin-top: 10px;"></el-input>
            </div>

            <div class="inpVue">
                <div class="flex_between align_center">
                    <div class="label">分组</div>
                    <span style="color: #0147fd; font-size: 12px; cursor: pointer; font-weight: 600;" @click="isCreateCategory=true">创建分组</span>
                </div>
                <!-- 创建分组 -->
                <div class="flex" v-if="isCreateCategory">
                    <el-input placeholder="请输入分组名称" style="width: 100%; margin-top: 8px" v-model="name"></el-input>
                    <el-button size="mini" type="sure" @click="changeCategoryName">确认</el-button>
                    <el-button size="mini" type="cancel" @click="isCreateCategory=false">取消</el-button>
                </div>
                <!-- 选择分组 -->
                <el-select v-model="editObj.categoryName" placeholder="选择分组" style="width: 100%; margin-top: 8px;" @change="categoryChange" clearable v-else>
                    <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item">
                        <div class="flex_between align_center" style="height: 34px;">
                            <span style="color: #333; font-weight: normal; font-size: 13px;">{{ item.name }}</span>
                            <span class="el-icon-delete" @click.stop="deleteCategory(item.id)"></span>
                        </div>
                    </el-option>
                </el-select>
            </div>

            <div class="inpVue">
                <div class="label">标签</div>
                <el-select v-model="value" placeholder="添加标签" style="width: 100%; margin-top: 10px" @change="editChange">
                    <el-option v-for="item in tagList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <div class="inner">
                    <template v-if="editObj.tag">
                        <el-tag type="info" v-for="(item, index) in editObj.tag.split(',')" :key="index" size="mini">{{ item }}</el-tag>
                    </template>
                </div>
            </div>
                
            <div class="inpVue">
                <div class="label">AI总结</div>
                <textarea v-model="editObj.summary"></textarea>
            </div>

            <div class="btn" @click="editFun">
                <span class="el-icon-loading" v-if="loading"></span>
                <span v-else>确定</span>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from "vuex"
import { toast } from "@/common/tools"
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            isCreateCategory: false,
            name: "",
            loading: false,
            editObj: {
                id: "",
                friendWechatName: "",
                categoryName: "",
                categoryId: "",
                summary: "",
                tag: "",
                type: 0,
                remarkPhone: "",
                remarkNotes: ""
            },
            categoryList: [],
            value: "",
            id: "",
            tagList: ["高意向","中意向","低意向","了解产品详情", "询问价格", "询问使用方法", "询问发货时间", "询问售后服务", "非常满意", "满意", "一般", "不满意", "非常不满意", "产品质量", "发货时间", "售后服务", "使用问题", "价格问题", "新客户", "忠实客户", "活跃", "潜在", "流失"],
        }
    },

    computed: {
        ...mapState({
            currentWeChat: state=> state.currentWeChat
        })
    },

    methods: {
        editChange(e){
            this.value = ""
            let list = this.editObj.tag.split(",")
            if(list.indexOf(e)==-1) {
                list.push(e)
            }
            this.editObj.tag = list.join(",")
        },

        categoryChange(e){
            this.editObj.categoryId = e.id
            this.editObj.categoryName = e.name
        },

        getFriendDetail(id){
            this.$post("/front/wechat/friend/wechatFriend", { id  }).then(res=>{
                if(res.data.code===0) {
                    this.editObj = res.data.obj
                    console.log(this.editObj)
                }
            })
        },

        beforeClose(){
            this.editObj = {
                id: "",
                friendWechatName: "",
                categoryName: "",
                categoryId: "",
                summary: "",
                tag: "",
                type: 0,
                remarkPhone: "",
                remarkNotes: ""
            }
            this.$emit("beforeClose")
        },

        // 编辑
        editFun(){
            if(this.loading) return
            this.loading = true
            this.$post("/front/wechat/friend/addAndModifyFriendRemark", {
                id: this.editObj.id,
                userWechatPrimaryId: this.currentWeChat.currentWeChatId,
                remarkFriendName: this.editObj.remarkFriendName,
                friendWechatIdOrGroupWechatId: this.editObj.type===0 ? this.editObj.friendWechatId : this.editObj.groupId,
                type: this.editObj.type,
                remarkMailbox: "",
                remarkQq: "",
                remarkWechat: "",
                remarkPhone: this.editObj.remarkPhone,
                tag: this.editObj.tag,
                summary: this.editObj.summary,  //AI总结
                remarkNotes: this.editObj.remarkNotes,
                categoryId: this.editObj.categoryId
            }).then(res=>{
                this.loading = false
                if(res.data.code===0) {
                    toast(0, "编辑成功")
                    this.beforeClose()
                    this.$emit("callback")
                }else{
                    toast(1, res.data.msg)
                }
            })
        },
        
        // 获取分组列表
        getCategoryList(){
            this.$post("/front/wechat/friend/categoryList").then(res=>{
                if(res.data.code===0) {
                    this.categoryList = res.data.obj
                }
            })
        },

         // 删除分组
         deleteCategory(id){
            this.$post("/front/wechat/friend/delCategory", { id }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "删除成功")
                    this.getCategoryList()
                }
            })
        },

        // 创建分组
        changeCategoryName(){
            if(!this.name) return toast(1, "请输入分组名称")
            this.$post("/front/wechat/friend/createCategory", {
                name: this.name
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "创建成功")
                    this.name = ""
                    this.getCategoryList()
                    this.isCreateCategory = false
                }else{
                    toast(1, res.data.msg)
                }
            })
        },
        
    }
}
</script>

<style lang="less" scoped>
:deep(.el-tag--info) {
    margin-right: 5px !important;
}
:deep(.el-dialog) {
    width: 500px;
    height: auto;
    border-radius: 10px;
}
:deep(.el-dialog__header) {
    padding: 20px 0 0;
}
:deep(.el-dialog__body) {
    padding: 0 30px 30px;
}
:deep(.el-button--sure) {
    background: #0147fd;
    height: 40px;
    margin-top: 8px;
    margin-left: 10px;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--cancel) {
    background: #AAA;
    margin-top: 8px;
    height: 40px;
    span {
        color: #fff !important;
    }
}
.dialogVue {
    width: 100%;
    border-radius: 5px;
    .inpVue {
        width: 100%;
        margin-top: 20px;
        .label {
            color: #333;
            font-size: 12px;
        }
        .inner {
            width: 100%;
            height: 80px;
            border-radius: 4px;
            background: #FAFAFA;
            margin-top: 8px;
            padding: 10px;
            border: #E4E7ED 1px solid;
            overflow: scroll
        }
        .inner::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        
        .el-dropdown-menu ::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        textarea {
            width: 100%;
            height: 80px;
            border: #DCDFE6 1px solid;
            display: block;
            box-sizing: border-box;
            resize: none;
            border-radius: 4px;
            margin-top: 10px;
            font-family: PingFangSC, PingFang SC;
            padding: 5px;
            font-size: 13px;
            line-height: 1.4;
        }
        ::-webkit-input-placeholder { /* WebKit browsers */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        textarea::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
    .btn {
        width: 240px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #0147fd;
        border-radius: 5px;
        margin: 30px auto 0;
        cursor: pointer;
        span {
            color: #fff;
        }
    }
}
</style>